﻿<html>
<head>
    <title>Prueba</title>
    <style type="text/css">
        * { font-family: Verdana; }
        h2 { font-style: italic; text-decoration: underline; }
        .alumnos { background-color: Yellow; }
        #g1 { color: Green; font-weight: bold; cursor:pointer; }
        .aprobado { color: Blue; }
        .casicasi { color: Red; }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
</head>
<body>
    <h1 style="color: Blue">Curso DEW .NET</h1>
        <h2>2011-2-A</h2>
            <div id="g1">
                Grupo 1
                <div style="display:block">
                    <table class="alumnos">
                        <tr><td>Juan</td><td class="nota">12.4</td></tr>
                        <tr><td>Luis</td><td class="nota">15.6</td></tr>
                    </table>
                </div>
            </div>            
            <div id="g2">
                Grupo 2
                <div style="display:none">
                    <table class="alumnos">
                        <tr><td>Ana</td><td class="nota">11.9</td></tr>
                        <tr><td>Luz</td><td class="nota">18.1</td></tr>
                    </table>
                </div>
            </div>
            
        <h2>2011-2-B</h2>
            <div>Grupo 1</div>
            <div>Grupo 2</div>
    <script type="text/javascript">
        $(document).ready(function () {
            $('div[id^="g"]').click(function () {
                var menu = $("div", this);
                if (menu.is(":hidden")) {
                    menu.slideDown("slow");
                } else {
                    menu.slideUp("slow");
                }
            });
            $(".nota").each(function () {
                var nota = $(this).html();
                if (nota < 12.5)
                    $(this).css("color", "Red");
                else
                    $(this).css("color", "Blue");
            });
            $("h1").click(function () {
                $.ajax({
                    url: "/Home/Prueba",
                    success: function (data) {
                        alert(data);
                    },
                    error: function (error) {
                        alert(error);
                    }
                });
            });
        });
    </script>
</body>
</html>
